<template>
  <div id="app">
    <Header></Header>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>
<script>
import axios from 'axios';
import Header from './components/Header';
import Footer from './components/Footer';

export default {
  name: 'app',
  components: {
    Header,
    Footer
  },
  data () {
    return {

    };
  },
  methods: {
    getCaptcha () {
      axios.get('http://localhost:3000/getCaptcha').then((res) => {
        if (res.status === 200) {
          let obj = res.data;
          if (obj.code === 200) {
            this.svg = obj.data;
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "assets/css/global.css";

$spacer: 10px;

// from map.scss
$spacers: (
  6: 6 * $spacer,
  7: 7 * $spacer
) !default; //可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

$spacers: map-merge($map1: (
  0: 0,
  1: 1 * $spacer,
  2: 2 * $spacer,
  3: 3 * $spacer,
  4: 4 * $spacer,
  5: 5 * $spacer
), $map2: $spacers);

$utils: (
  pdl: (
    property: margin-left,
    values: $spacers
  )
) !default;

$utils: map-merge($map1: (
  m: (
    property: margin,
    values: $spacers
  ),
  ml: (
    property: margin-left,
    values: $spacers
  ),
  mr: (
    property: margin-right,
    values: $spacers
  ),
  mx: (
    // 通过空格或者逗号分割数组的值
    property: margin-left margin-right,
    values: $spacers
  ),
  pd: (
    property: padding,
    values: $spacers
  ),
  pdl: (
    property: padding-left,
    values: $spacers
  ),
  pdr: (
    property: padding-right,
    values: $spacers
  ),
  pdx: (
    property: padding-left padding-right,
    values: $spacers
  ),
), $map2: $utils);

// 类似于@for，但不用的是可以自定义key值并引用
@each $key, $value in $utils {
  $values: map-get($map: $value, $key: values);

  @each $item-key, $item-value in $values {
    $properties: map-get($map: $value, $key: property);
    
    .#{$key}#{$item-key} {
      @each $property in $properties {
        #{$property}: $item-value!important;
      }
    }
  }
}

.text-align-center {
  text-align: center;
}
.text-align-left {
  text-align: left;
}
.text-align-right{
  text-align: right;
}

.orange {
  color: #ff5722;
}

.pull-right {
  float: right;
}
</style>
